<template>
  <div>
    <el-page-header @back="goBack" content="首页" style="margin-bottom: 40px">
    </el-page-header>
    <el-divider></el-divider>

    <div style="margin-left: -20px;margin-top: -20px">

      <div style="margin-top: 4%;margin-bottom: 4%">
        <el-row :gutter="20">
          <el-col :span="6">
            <div>
              <el-statistic
                  group-separator=","
                  :precision="2"
                  :value="value2"
                  :title="title"
              ></el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic title="活动参与男女比">
                <template slot="formatter">
                  456/2
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic
                  group-separator=","
                  :precision="2"
                  decimal-separator="."
                  :value="value1"
                  :title="title2"
              >
                <template slot="prefix">
                  <i class="el-icon-s-flag" style="color: red"></i>
                </template>
                <template slot="suffix">
                  <i class="el-icon-s-flag" style="color: blue"></i>
                </template>
              </el-statistic>
            </div>
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic :value="like ? 521 : 520" title="Feedback">
                <template slot="suffix">
              <span @click="like = !like" class="like">
                <i
                    class="el-icon-star-on"
                    style="color:red"
                    v-show="!!like"
                ></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
                </template>
              </el-statistic>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-input v-model="search" placeholder="请输入内容" style="margin-left:27%;width: 40%;margin-top: 3%"></el-input>
      <el-button type="primary">搜索</el-button>

    </div>
    <!--    <div style="background-color: aliceblue;height: 700px;width: 100.5%;margin-left: -20px;margin-top: 7%;margin-bottom: 20px">-->
    <div style="margin-top:60px;">
      <el-carousel indicator-position="outside" >
        <el-carousel-item v-for="item in banner" >
          <img :src="item.img" style="width: 100%;height: 100%">
        </el-carousel-item>
      </el-carousel>
      <el-row>
        <el-col :span="6" v-for="item in acticity">
          <el-card class="box-card" style="margin: 10px;padding: 0px">
            <div class="cont-box">
              <img :src="item.img" style="width: 100%;height: 20%">
              <div class="cont">
                <p>{{ item.name }}</p>
                <span>{{ item.description }}</span>
              </div>


            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      search: "",
      like: true,
      value1: 415468,
      value2: 121,
      title: "活动总数",
      title2: "活动参与人数",
      acticity: [
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        },
        {
          name: "幸运大转盘",
          description: "欢迎参加我们精彩刺激的幸运大转盘抽奖活动！作为一名新用户，您将有机会赢取惊喜丰厚的奖品",
          img: "http://yun.duiba.com.cn/images/202004/o9ini977b5.jpg"
        }
      ],
      banner:[
        {img:"https://pic.vjshi.com/2016-12-29/a4fdf108c31dd5458728dc38fffe3922/00002.jpg?x-oss-process=style/watermark"},
        {img:"https://img-qn.51miz.com/Element/00/71/51/08/ea22cedc_E715108_229f0160.jpg"},
        {img:"https://ts1.cn.mm.bing.net/th/id/R-C.f5cedeb7d23729201b60b0edc9f1f9fc?rik=MUB7fLRuhK%2f3SQ&riu=http%3a%2f%2fimg.redocn.com%2fsheji%2f20150403%2fchoujianghaibaoshejimoban_4089411.jpg&ehk=QHIGHzlKqs0Ms4LcvywCEPSg2h3UGZ48Q1CXC2EIcRQ%3d&risl=&pid=ImgRaw&r=0"},
      ],
    }
  },
  methods: {
    goBack() {
      console.log('go back');
    },

  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 0px 0;
}

.el-card__body {
  padding: 0px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.cont-box{
  position: relative;
}
.cont{
  display: none;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  bottom: 5px;
  font-size: 13px;
  color: white;
  font-family: 新宋体;
}
.el-col:hover .cont{
  display: block !important;
}

.el-carousel__container {
  position: relative;
  height: 450px;
}

</style>